<?php
/**
 * 英雄区视图
 * 使用原生PHP标签的模板文件
 */

// 引入语言加载器
require_once BASE_PATH . '/includes/language_loader.php';

// 获取当前语言和可用语言
$currentLang = getCurrentLanguage();
$availableLangs = getAvailableLanguages();
?>

<!-- 英雄区 -->
<section class="relative <?php echo $data['bgStyles']; ?> <?php echo $data['textColorClass']; ?> <?php echo $data['heightClass']; ?> overflow-hidden">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <!-- 语言切换下拉菜单 -->
        <div class="absolute top-4 right-4 z-20">
            <div class="relative group">
                <button class="flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium border border-white/20 bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-all">
                    <span><?php echo $availableLangs[$currentLang]; ?></span>
                    <i class="fa fa-chevron-down text-xs"></i>
                </button>
                <div class="absolute right-0 mt-2 w-40 rounded-lg bg-white dark:bg-gray-800 shadow-xl overflow-hidden transform scale-0 opacity-0 transition-all duration-300 origin-top-right group-hover:scale-100 group-hover:opacity-100">
                    <?php foreach ($availableLangs as $langCode => $langName): ?>
                        <?php if ($langCode !== $currentLang): ?>
                            <a href="?lang=<?php echo $langCode; ?>&<?php echo http_build_query(array_diff_key($_GET, ['lang' => ''])); ?>" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                <?php echo $langName; ?>
                            </a>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row items-center gap-10">
            <!-- 文本内容区 -->
            <div class="max-w-3xl <?php echo $data['alignmentClass']; ?>">
                <?php if (!empty($data['section_pretitle'])): ?>
                <p class="inline-block px-3 py-1 rounded-full text-sm font-medium mb-4 <?php echo $data['text_color'] === 'white' ? 'bg-white/20' : 'bg-gray-100'; ?>">
                    <?php echo $data['section_pretitle']; ?>
                </p>
                <?php endif; ?>
                
                <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold leading-tight mb-6 tracking-tight">
                    <?php echo $data['section_title']; ?>
                </h1>
                
                <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-[clamp(1rem,2vw,1.25rem)] <?php echo $data['textMutedClass']; ?> mb-8 max-w-2xl leading-relaxed">
                    <?php echo $data['section_subtitle']; ?>
                </p>
                <?php endif; ?>
                
                <?php if (!empty($data['buttons']) && is_array($data['buttons'])): ?>
                <div class="flex flex-wrap gap-4 justify-<?php echo $data['alignment']; ?>">
                    <?php foreach ($data['buttons'] as $button): ?>
                        <a href="<?php echo htmlspecialchars($button['url'] ?? '#'); ?>" class="<?php echo $button['class']; ?>">
                            <?php if (!empty($button['icon'])): ?>
                                <i class="fa <?php echo $button['icon']; ?> mr-2"></i>
                            <?php endif; ?>
                            <?php echo $button['text']; ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>
            </div>
            
            <!-- 右侧图片（如果配置） -->
            <?php if (!empty($data['image']['src']) && $data['image']['position'] !== 'bottom'): ?>
            <div class="<?php echo $data['image']['width']; ?> lg:<?php echo $data['image']['position']; ?>">
                <img 
                    src="<?php echo htmlspecialchars($data['image']['src']); ?>" 
                    alt="<?php echo htmlspecialchars($data['title']); ?>" 
                    class="rounded-lg shadow-2xl w-full object-cover h-auto max-h-[500px] transform transition-transform duration-700 hover:scale-105"
                >
            </div>
            <?php endif; ?>
        </div>
        
        <!-- 底部图片（如果配置） -->
        <?php if (!empty($data['image']['src']) && $data['image']['position'] === 'bottom'): ?>
        <div class="mt-12">
            <img 
                src="<?php echo htmlspecialchars($data['image']['src']); ?>" 
                alt="<?php echo htmlspecialchars($data['title']); ?>" 
                class="rounded-lg shadow-xl w-full object-cover h-auto max-h-[400px]"
            >
        </div>
        <?php endif; ?>
    </div>
    
    <!-- 底部波浪装饰（可选） -->
    <?php if (!empty($data['show_wave']) && $data['show_wave']): ?>
    <div class="absolute bottom-0 left-0 right-0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" class="w-full h-auto">
            <path fill="<?php echo $data['text_color'] === 'white' ? '#ffffff' : '#f8fafc'; ?>" fill-opacity="1" d="M0,64L60,69.3C120,75,240,85,360,80C480,75,600,53,720,48C840,43,960,53,1080,58.7C1200,64,1320,64,1380,64L1440,64L1440,100L1380,100C1320,100,1200,100,1080,100C960,100,840,100,720,100C600,100,480,100,360,100C240,100,120,100,60,100L0,100Z"></path>
        </svg>
    </div>
    <?php endif; ?>
</section>